<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='用户个人信息'">
<header th:replace="header::header(${title})"></header>
<header th:replace="avatar::header"></header>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
	<section class="section-content">
		<div class="row">
			<div class="col-xs-4 pr5">
				<input id="userId" name="userId" th:value="${user.userId}" type="hidden">
				<div class="ibox float-e-margins">
					<div class="ibox-title ibox-title-gray dashboard-header gray-bg">
						<h5>个人资料</h5>
					</div>
					<div class="ibox-content">
						<div class="text-center">
							<p>
								<a href="#" data-target="#avatar" data-toggle="modal"><img class="img-circle img-lg" id="user-avatar" name="user-avatar"
									th:src="${#httpServletRequest.getContextPath()}+${user.picId}"></a>
							<p>
						</div>
						<ul class="list-group list-group-striped">
							<li class="list-group-item"><i class="fa fa-user"></i> <b class="font-noraml">登录名称：</b>
								<p class="pull-right">[[${user.userName}]]</p></li>
							<li class="list-group-item"><i class="fa fa-user"></i> <b class="font-noraml">昵称：</b>
								<p class="pull-right">[[${user.name}]]</p></li>
							<li class="list-group-item"><i class="fa fa-phone"></i> <b class="font-noraml">手机号码：</b>
								<p class="pull-right">[[${user.mobile}]]</p></li>
							<li class="list-group-item"><i class="fa fa-group"></i> <b class="font-noraml">所属部门：</b>
								<p class="pull-right">[[${user.deptName}]]</p></li>
							<li class="list-group-item"><i class="fa fa-birthday-cake"></i> <b class="font-noraml">生日：</b>
								<p class="pull-right">[[${user.birth}]]</p></li>
							<li class="list-group-item"><i class="fa fa-futbol-o"></i> <b class="font-noraml">兴趣爱好：</b>
								<p class="pull-right " id="hobby"></p></li>
							<li class="list-group-item"><i class="fa fa-home"></i> <b class="font-noraml">所属地区：</b>
								<p class="pull-right">[[${@dictService.getDictDataName('AreaCode',user.district)}]]</p></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-xs-8" style="padding-left: 0px">
				<div class="ibox float-e-margins">
					<div class="ibox-title ibox-title-gray dashboard-header">
						<h5>基本资料</h5>
					</div>
					<div class="ibox-content">
						<div class="nav-tabs-custom">
							<ul class="nav nav-tabs">
								<li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
								<li><a href="#modify_password" data-toggle="tab" aria-expanded="false">修改密码</a></li>
							</ul>
							<div class="tab-content">
								<!--用户信息-->
								<div class="tab-pane active" id="user_info" th:object="${user}">
									<form class="form-horizontal" id="form-user-edit">
										<p></p>
										<input id="userId" name="userId" th:value="*{userId}" hidden="true">
										<div class="form-group">
											<label class="col-sm-2 control-label">昵称：</label>
											<div class="col-sm-10">
												<input type="text" autocomplete="off" class="form-control" name="name" th:field="*{name}" placeholder="请输入昵称">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">手机号码：</label>
											<div class="col-sm-10">
												<input type="text" autocomplete="off" class="form-control" name="mobile" maxlength="11" th:field="*{mobile}" placeholder="请输入手机号码">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">邮箱：</label>
											<div class="col-sm-10">
												<input type="text" autocomplete="off" class="form-control" name="email" th:field="*{email}" placeholder="请输入邮箱">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">性别：</label>
											<div class="col-sm-10">
												<label class="radio-inline" th:each="dict:${@dict.getDictDatas('Sex')}"> <input th:field="*{sex}" type="radio" th:value="${dict.dictNo}"
													th:text="${dict.dictName}" />
												</label>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">生日：</label>
											<div class="col-sm-10">
												<input type="text" autocomplete="off" class="form-control layer-date laydate-icon" readonly name="birth" th:field="*{birth}" placeholder="请输入生日" onclick="laydate()">
											</div>
										</div>
										<div class="form-group ">
											<label class="col-sm-2 control-label">爱好：</label>
											<div class="checxbox i-checks">
												<input name="hobbys" id="hobbys" th:value="${hobby}" type="hidden"> <label th:each="dict:${@dict.getDictDatas('hobby')}" class="checkbox-inline"> <input
													name="hobby" type="checkbox" th:value="${dict.dictNo}" th:text="${dict.dictName}" th:attr="checked=${@dictService.contains(dict.dictNo,user.hobby)?true:false}">
												</label>
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">现居住地址：</label>
											<div class="col-sm-10">
												<select class="form-control m-b" name="province" id="province" th:field="*{province}" style="width: auto"
													th:with="type=${@dictService.getProvinces('AreaCode','province')}">
													<option value="">--- 请选择省份 ---</option>
													<option th:each="dict : ${type}" th:text="${dict.dictName}" th:value="${dict.dictNo}" th:selected="selected"></option>
												</select> <select class="form-control m-b" name="city" id="city" th:field="*{city}" style="width: auto"
													th:with="type=${@dictService.getNextCitys('AreaCode',user.province,'city')}">
													<option value="">--- 请选择城市 ---</option>
													<option th:each="dict : ${type}" th:text="${dict.dictName}" th:value="${dict.dictNo}" th:selected="selected"></option>
												</select> <select class="form-control m-b" name="district" id="district" th:field="*{district}" style="width: auto"
													th:with="type=${@dictService.getNextCitys('AreaCode',user.city,'area')}">
													<option value="">--- 请选择地区 ---</option>
													<option th:each="dict : ${type}" th:text="${dict.dictName}" th:value="${dict.dictNo}" th:selected="selected"></option>
												</select> <input type="text" autocomplete="off" class="form-control" name="address" th:field="*{address}" placeholder="请输入详细现居住地址">
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-sm btn-primary" onclick="updateUserInfo('form-user-edit')">
													<i class="fa fa-check"></i>
													保 存
												</button>
											</div>
										</div>
									</form>
								</div>
								<!--修改密码-->
								<div class="tab-pane" id="modify_password">
									<form class="form-horizontal" id="form-user-resetPwd">
										<p></p>
										<div class="form-group">
											<label class="col-sm-2 control-label">旧密码：</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" name="oldPassword" placeholder="请输入旧密码">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">新密码：</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="请输入新密码">
											</div>
										</div>
										<div class="form-group">
											<label class="col-sm-2 control-label">确认密码：</label>
											<div class="col-sm-10">
												<input type="password" class="form-control" name="confirmPassword" placeholder="请确认密码">
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-offset-2 col-sm-10">
												<button type="button" class="btn btn-sm btn-primary" onclick="updatePassword('form-user-resetPwd')">
													<i class="fa fa-check"></i>
													保 存
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</section>
	<th:block th:replace="footer :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "/sys/user";
        $(document).ready(function() {
	        validateRule();
	        $('#hobby').html(YiMo.getDictDatas('hobby', '[[${user.hobby}]]'));

			if($("select[name='province']").val() == null || $("select[name='province']").val() == ""){
				$("select[name='city']").empty();
				$("select[name='district']").empty();
				$("select[name='city']").append("<option value=''>--- 请选择城市 ---</option>");
				$("select[name='district']").append("<option value=''>--- 请选择地区 ---</option>");
			}
	    	// 更改省份后的操作
	    	$("select[name='province']").change(function() {
	    		var provCode = $("select[name='province']").val();
	    		getCity(provCode);

	    	});

	    	// 更改城市后的操作
	    	$("select[name='city']").change(function() {
	    		var cityCode = $("select[name='city']").val();
	    		getArea(cityCode);
	    	});
	        
        });

        /*用户管理-基本信息*/
        function updateUserInfo(formId) {
        	 if(!$('#'+formId).valid()){
        	    	return;
        	  }
	        $("#hobby").val(getCheckedHobbys());
	        YiMo.ajaxPut({
	            url : ctx + "sys/user/update",
	            data : $('#'+formId).serialize(),
	            needClose : true,
	            refreshTab : true,
	        });
        }
        /*用户管理-密码*/
        function updatePassword(formId) {
        	if(!$('#'+formId).valid()){
    	    	return;
    	  }
	        YiMo.ajaxPut({
	            url : prefix + "/updatePwd",
	            data : $('#'+formId).serialize(),
	            needClose : true,
	            refreshTab : true,
	        });
        }
        function getCheckedHobbys() {
	        var ids = "";
	        $("input:checkbox[name=hobby]:checked").each(function(i) {
		        if (0 == i) {
			        ids = $(this).val();
		        } else {
			        ids += ("," + $(this).val());
		        }
	        });
	        return ids;
        }

        /*表单校验*/
        function validateRule() {
	        $("#form-user-edit").validate({
	            focusCleanup : true,//如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。
	            focusInvalid:false,
          　　onkeyup :false,// 是否在敲击键盘时验证
	            rules : {
	                name : {
		                required : true,
	                },
	                sex : {
	                	required : true,
	                },
	                email : {
	                    required : true,
	                    email : true,
	                    remote : {
	                        url : prefix + "/checkEmailUnique",
	                        type : "post",
	                        dataType : "json",
	                        data : {
	                            "email" : function() {
		                            return $("#email").val();
	                            },
	                            "userId" : function() {
		                            return $("#userId").val();
	                            },
	                        },
	                        dataFilter : function(data, type) {
		                        if (data == "true")
			                        return true;
		                        else
			                        return false;
	                        }
	                    }
	                },
	                mobile : {
	                    required : true,
	                    minlength : 11,
	                    maxlength : 11,
	                    remote : {
	                        url : prefix + "/checkMobileUnique",
	                        type : "post",
	                        dataType : "json",
	                        data : {
	                            "mobile" : function() {
		                            return $("#mobile").val();
	                            },
	                            "userId" : function() {
		                            return $("#userId").val();
	                            },
	                        },
	                        dataFilter : function(data, type) {
		                        if (data == "true")
			                        return true;
		                        else
			                        return false;
	                        }
	                    }
	                },
	            },
	            messages : {
	                "name" : {
		                required : "请输入昵称",
	                },
	                "email" : {
	                    required : "请输入邮箱",
	                    remote : "Email已经存在"
	                },
	                "mobile" : {
	                    required : "请输入手机号码",
	                    remote : "手机号码已经存在",
	                }
	            },
	        });
	        $("#form-user-resetPwd").validate({
	            onkeyup : false,
	            focusCleanup : true,
	            rules : {
	                oldPassword : {
		                required : true,
	                },
	                newPassword : {
	                    required : true,
	                    minlength : 6,
	                    maxlength : 20
	                },
	                confirmPassword : {
	                    required : true,
	                    equalTo : "#newPassword"
	                }
	            },
	            messages : {
	                oldPassword : {
	                    required : "请输入原密码",
	                    remote : "原密码错误"
	                },
	                newPassword : {
	                    required : "请输入新密码",
	                    minlength : "密码不能小于6个字符",
	                    maxlength : "密码不能大于20个字符"
	                },
	                confirmPassword : {
	                    required : "请再次输入新密码",
	                    equalTo : "两次密码输入不一致"
	                }

	            },
	        });
        }
        
      //获取对应城市列表（里面包括获取第一个城市的区县列表）
        function getCity(provCode) {

        	var firstCityCode;

        	// ajax请求所有市级单位
        	$.ajax({
                type : 'GET',
                url : ctx + 'sys/dictData/getNextCitys',
                data : {
                    'dictType' : 'AreaCode',
                    'dictNo' : provCode,
                    'dictDescribe' : 'city'
                },
                async : false,
                dataType : 'json',
                success : function(data) {

        			// 先清空城市下拉框
        			$("select[name='city']").empty();
        	
        			$.each(data, function(i, d) {
        				$("select[name='city']").append(
        						"<option value='"+d.dictNo+"'>" + d.dictName
        								+ "</option>");
        			});
        	        // 获取第一个城市的code
        	        firstCityCode = data[0].dictNo;
        	        // 根据第一个城市code获取对应区县列表
        	        getArea(firstCityCode);
                
                },
            });
        		
        }

        function getArea(cityCode) {

        	// ajax请求所有区县单位
        	$.ajax({
                type : 'GET',
                url : ctx + 'sys/dictData/getNextCitys',
                data : {
                	'dictType' : 'AreaCode',
                    'dictNo' : cityCode,
                    'dictDescribe' : 'area'
                },
                async : false,
                dataType : 'json',
                success : function(data) {

        			// 先清空城市下拉框
        			$("select[name='district']").empty();
        	
        			$.each(data, function(i, d) {
        				$("select[name='district']").append(
        						"<option value='"+d.dictNo+"'>" + d.dictName
        								+ "</option>");
        			});
                },
            });
        }

	</script>
	<th:block th:replace="avatar :: div" />
</body>
</html>
